<template>
  <div class="writer-info">
    <div style="display:flex">
      <div class="avatar-box">
        <img v-if="avatarUrl" :src="avatarUrl" />
        <el-avatar v-else src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
      </div>
      <div style="margin-top:4%">
        <h1 style="letter-spacing: 3px;font-size:20px;">{{ name }}</h1>
        <div class="stats">
          <span>作品数量 :{{props.count}}</span>
          <span> | </span>
          <span>作者热度 :{{  writerHot }}</span>
          <div class="ratebox">
            <span>评分:</span>
            <el-rate 
              allow-half 
              v-model="rateValue" 
              :colors="rateColor" 
              size="large" 
              @change="handleRateChange"
            ></el-rate>
            <p>{{ aveRate }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted,getCurrentInstance} from 'vue';
import { useRoute } from 'vue-router';
const {proxy}=getCurrentInstance();
const route = useRoute();
const writerAccount = computed(() => route.params.username);

const props=defineProps({
    count:Number
})
const avatarUrl = ref('');
const name = ref('loading...');
const workCount = ref();
const writerHot = ref();
const rateValue = ref();
const aveRate = ref();
const rateColor = ref(['#99A9BF', '#F7BA2A', '#FF9900']);

const fetchAuthorInfo = async () => {
  try {
    const response = await proxy.$http.post('/get_writer_inf/', { user_name: writerAccount.value });
    if (response && response.data) {
      avatarUrl.value = response.data.head;
      name.value = response.data.nick;
      workCount.value = response.data.book;
      writerHot.value = response.data.hot;
      aveRate.value = response.data.point;
      rateValue.value = response.data.last/2;
    }
  } catch (error) {
    console.error('Error fetching author info:', error);
  }
};

const handleRateChange = async (newRate) => {
  console.log('33333333',newRate*2)
  
  try {
    await proxy.$http.post('/add_point/', { user_name: writerAccount.value, point: newRate*2 });
    await fetchAuthorInfo(); 
  } catch (error) {
    console.error('Error updating rate:', error);
  }
};

onMounted(() => {
  fetchAuthorInfo();
  console.log('111111111',writerAccount.value)
});
</script>

<style scoped>
.writer-info {
  width: 97%;
  height: 22vh;
  display: flex;
  background-color: white;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 2px 1px 19px rgba(0, 0, 0, 0.1);
}
.avatar-box {
  position: relative;
  margin: 4% 4% 0 4%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 0.5px solid #ccc;
}
.avatar-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-box .el-avatar {
  width: 100%;
  height: 100%;
}
.stats {
  margin: 10px 0;
  margin-top: 6%;
  font-size: 14px;
  color: #666;
}
.ratebox {
  display: flex;
  align-items: center;
}
.ratebox span {
  margin-right: 15px;
}
.span-divider {
  border-left: 1.5px solid #ccc;
  padding-left: 15px;
  margin-left: 15px;
  height: 30px;
  line-height: 30px;
  display: inline-block;
}
</style>